<!DOCTYPE html>
<include file="public@storage"/>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>
<link rel="stylesheet" href="__STATIC__/js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css"/>
<script type="text/javascript" src = "__STATIC__/js/jquery.js"></script>
<script type="text/javascript" src = "__STATIC__/js/echarts/echarts.min.js"></script>

<body style="height: 100%; margin: 0">

<div class="container body-content" style=" margin-top:20px; width: 100%">
    <div class="panel panel-info" style="margin-bottom: 0.5rem">
        <div class="panel-heading"><span id="storageName">{$storageInfo[0]['name']}</span>出入库件数</div>
        <input type="hidden" id="storageUuid" value="{$storageInfo[0]['uuid']}">
<div class="panel-body">
<div class="row">
    <div class="col-sm-12">
<select id="daySelect" class="btn btn-info" style="margin-left: 5px; width: 10rem">
    <option value ="3">3天内</option>
    <option value ="7">7天内</option>
    <option value="15">15天内</option>
    <option value="30">30天内</option>
</select>


    <select id="storageSelect" class="btn btn-info" style="margin-left: 5px; width: 10rem">
        <volist id="uuid" name="storageInfo" id="value">
            <option value="{$value['uuid']}">{$value['name']}</option>
        </volist>
    </select>
        <img src="__STATIC__\storage\fileinput\img\loading-sm.gif" id = 'p'>

    </div>
</div>
</div>
    </div>
</div>

<div id="container" style="height: 100%"></div>


<script type="text/javascript">
    $(function () {
        var dayNum;
        var daySelect = $("#daySelect");
        daySelect.on('change',function () {
            dayNum = $("#daySelect").val();
            begin();
        });
        var storageUuid;
        var storageSelect = $("#storageSelect");
        storageSelect.on('change',function () {
            storageUuid = $("#storageSelect").val();
            begin();
        });
        var inflow_data;//入库件数的数据
        var outflow_data;//出库件数的数据
        //获取出库件数
        var days = [];
            if (typeof(dayNum)=="undefined"){
                dayNum = 3;
            }
function begin(){
            $.ajax({
                type: "POST",//规定传输方式
                async:true,
                url: "{:url('storage/Charts/getInflowByDay')}?dayNum="+dayNum+"&storageUuid="+storageUuid,//提交URL
                // data: {'name':$('#name').val(),'age':$('#age').val()},//提交的数据
                beforeSend: function(r){
                    $("#p").show();
                },
                success: function(result){

                    inflow_data = result;
                    console.log('get inflow success');
                    $.ajax({
                        type: "POST",//规定传输方式
                        async:true,
                        url: "{:url('storage/Charts/getOutflowByDay')}?dayNum="+dayNum+"&storageUuid="+storageUuid,//提交URL
                        // data: {'name':$('#name').val(),'age':$('#age').val()},//提交的数据
                        success: function(result){
                            $("#p").hide();
                            outflow_data = result;
                            console.log("get outflow success");
                            //获取入库件数

                            var now = new Date();
                            var today = now.getTime();
                            for(i = 0;i < dayNum; i++){
                                time = new Date(today - i*86400000);
                                var year= time.getFullYear(), month= (time.getMonth() + 1).toString(), day = time.getDate().toString();
                                if (month.length == 1) {
                                    month= '0' + month;
                                }
                                if (day .length == 1) {
                                    day = '0' + day ;
                                }
                                days[dayNum - i - 1] = (year+ '-' + month+ '-' + day );
                            }





                            var dom = document.getElementById("container");
                            var myChart = echarts.init(dom);
                            var app = {};
                            option = null;
                            option = {
                                title: {
                                    text: dayNum+'天内出入库数据'
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data:['出库','入库']
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '20%',
                                    containLabel: true
                                },
                                toolbox: {
                                    feature: {
                                        saveAsImage: {}
                                    }
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: days
                                },
                                yAxis: {
                                    type: 'value',
                                    minInterval: 1
                                },
                                series: [
                                    {
                                        name:'入库',
                                        type:'line',

                                        data:inflow_data
                                    },
                                    {
                                        name:'出库',
                                        type:'line',

                                        data:outflow_data
                                    }
                                ]
                            };

                            if (option && typeof option === "object") {
                                myChart.setOption(option, true);
                            }
                        }
                    });
                }
            });

}
begin();
    })

</script>
</body>
</html>